<template>
  <div>
    <class-inner :myCard="processedData" v-if="hasData">
    </class-inner>
    <div class="no-date" v-else>
      <img src="../../assets/img/main/nodate.png" alt="ha">
      暂无课程
    </div>
  </div>
</template>

<script>
import ClassInner from "@/components/mainpage/ClassInner.vue";

export default {
  data() {
    return {
      hasData: false,
      smallCard: '',
    }
  },
  components: {
    ClassInner,
  },
  props: ['myCourse'],
  mounted() {
  },
  methods: {},
  watch: {
    myCourse(newValue) {
      console.log(newValue)
      this.hasData = newValue.length !== 0;
    },
  },
  computed: {
    processedData() {
      const groupedData = {};
      this.myCourse.forEach((item) => {
        if (!groupedData[item.courseTime]) {
          groupedData[item.courseTime] = {
            courseTime: item.courseTime,
            list: []
          };
        }
        groupedData[item.courseTime].list.push({
          courseName: item.courseName,
          studyClass: item.studyClass,
          isTop: item.isTop,
          isMix: item.isMix,
          courseTeacher: item.courseTeacher,
          courseNumber: item.courseNumber,
          courseCode: item.courseCode,
          isOffline: item.isOffline,
          backgroundImage:item.backgroundImage
        });
      });

      return Object.values(groupedData);
    }
  },
}
</script>

<style scoped>
.no-date {
  height: max-content;
  padding-top: 100px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: #74787c;
  line-height: 24px;
  padding-bottom: 12px;
}

.no-date img {
  height: 184px;
  display: block;
  margin: 0 auto;
  padding-bottom: 12px;
}

</style>